<template>
  <div style="width: 100%; height: 90%;background: #eee">
    <div class="topList" >
      <template v-for="(it,inx) in topList">
        <div :key="inx" @dragstart='dragStart($event,it)' draggable="true">{{it.name}}</div>
      </template>
    </div>
    <workArea
      :firstFlag="true"
    />
  </div>
</template>

<script>
export default {
  name: "index",
  created() {
    this.init()
  },
  data(){
    return {
      topList: [
        {
          name: '块',
          type: 1
        },
        {
          name: '分支',
          type: 2
        },
        {
          name: '并发',
          type: 3
        }
      ]
    }
  },
  methods:{
    //  拖拽组件
    dragStart(event, node) {
      event.dataTransfer.setData('nodemodel', JSON.stringify(node))
      console.log(`我拖动的是   ${node.name}type是${node.type}`)
    },
    init(){
      console.log('初始化');
      // console.log(this.$ajax({
      //   url:
      // }));
    }
  }
}
</script>

<style scoped lang="sass">
.topList
  display: flex
  background: #edf1f4
  padding: 4px 10px
  div
    min-width: 100px
    text-align: center
    padding: 10px
    box-sizing: border-box
    color: #333
    cursor: grab
    position: relative
    &:hover
      background: rgba(20,139,255,0.04)
</style>
